<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-28 15:09:34
 * @FilePath: /src/views/service/application/history.vue
 * @LastEditTime: 2021-07-20 13:39:34
 * @LastEditors: luojiajun
-->
<template>
   <div class="app-container app-height schedule">
      <div class="bg-white">
         <el-table
            v-loading="loading"
            :data="tableList"
            :max-height="mapHeight"
            style="width: 100%"
            border
         >
            <el-table-column type="index" label="序号" align="center" width="50" fixed>
            </el-table-column>
            <el-table-column
               label="服务中文名称"
               align="center"
               prop="apiName"
               width="100"
            ></el-table-column>
            <el-table-column
               label="服务英文名称"
               align="center"
               prop="apiNameEn"
               width="100"
               show-overflow-tooltip
            ></el-table-column>
            <el-table-column
               label="版本号"
               align="center"
               prop="apiVersion"
               width="70"
            ></el-table-column>
            <el-table-column
               label="分类"
               align="center"
               prop="groupName"
            ></el-table-column>
            <el-table-column
               label="服务地址"
               align="center"
               prop="requestPath"
               width="250"
               show-overflow-tooltip
            ></el-table-column>
            <el-table-column
               label="接口状态"
               align="center"
               prop="apiStatus"
               width="150"
            >
               <template slot-scope="scope">
                  <span>{{ $enum.API_PUBLISH_STATUS_MAP[scope.row.apiStatus] || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="订阅人数"
               align="center"
               prop="subscribeCount"
               width="80"
            ></el-table-column>
            <el-table-column
               label="试用人"
               align="center"
               prop="tryUserName"
            >
               <template slot-scope="scope">
                  <span>{{ scope.row.tryUserName || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="试用时间"
               align="center"
               prop="tryUseTime"
               width="160"
            >
               <template slot-scope="scope">
                  <span>{{ scope.row.tryUseTime || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="试用状态"
               align="center"
               prop="invokeFailReason"
            >
               <template slot-scope="scope">
                  <span>{{ $enum.INVOKE_TRY_STATUS_MAP[scope.row.invokeFailReason] || '-' }}</span>
               </template>
            </el-table-column>
            <el-table-column
               label="请求报文"
               align="center"
               prop="requestParam"
               width="200"
               fixed="right"
               :show-overflow-tooltip="false"
            >
               <template slot-scope="scope">
                  <el-tooltip effect="dark" placement="left">
                     <div slot="content">
                        <pre class="pre-popover">{{ scope.row.requestParam || '-' }}</pre>
                     </div>
                     <div class="pre-wrapper">
                        <pre class="pre-inline">{{ scope.row.requestParam || '-' }}</pre>
                     </div>
                  </el-tooltip>
               </template>
            </el-table-column>
            <el-table-column
               label="响应报文"
               align="center"
               prop="returnResultJson"
               width="200"
               fixed="right"
               :show-overflow-tooltip="false"
            >
               <template slot-scope="scope">
                  <el-tooltip effect="dark" placement="left">
                     <div slot="content">
                        <pre class="pre-popover">{{ scope.row.returnResultJson || '-' }}</pre>
                     </div>
                     <div class="pre-wrapper">
                        <pre class="pre-inline">{{ scope.row.returnResultJson || '-' }}</pre>
                     </div>
                  </el-tooltip>
               </template>
            </el-table-column>
         </el-table>
         <pagination
            v-show="totalNum > 0"
            :total="totalNum"
            :page.sync="ruleForm.pageNum"
            :limit.sync="ruleForm.pageSize"
            @pagination="fetchData"
         />
      </div>
   </div>
</template>

<script>
import { tryInvokeApiHistoryList } from "@/api/dataService/pool";
import { getHeight, replacer } from "@/utils/zkComm";

export default {
   name: "tryInvokeHistory",
   data() {
      return {
         loading: false,
         ruleForm: {
            pageNum: 1,
            pageSize: 30,
         },
         tableList: [],
         totalNum: 0,
         mapHeight: undefined,  
         indent: 2
      };
   },
   created() {
      this.fetchData();
   },
   mounted() {
      this.mapHeight = getHeight(true);
   },
   methods: {
      formatJson(str) {
         if (!str) return 
         return JSON.stringify(JSON.parse(str), replacer, this.indent)
      },
      fetchData() {
         let params = {
            pageNum: this.ruleForm.pageNum,
            pageSize: this.ruleForm.pageSize,
         }

         tryInvokeApiHistoryList(params)
            .then(res => {
               if (res.code == 200) {
                  let tableList = res.data.records
                  for (let i = 0; i < tableList.length; i++) {
                     const item = tableList[i];
                     if (item.requestParam) item.requestParam = this.formatJson(item.requestParam)
                     if (item.returnResultJson) item.returnResultJson = this.formatJson(item.returnResultJson)
                  }
                  this.tableList = tableList
                  this.totalNum = res.data.total
               }
               this.loading = false;
            })
            .catch(() => {
               this.loading = false;
            });
      }
   }
};
</script>

<style lang="scss" scoped>
.app-container {
   padding: 20px;
}

.pre-popover {
   // max-width: 300px;
   max-height: 300px;
   padding-right: 20px;
   overflow-x: hidden;
}
.pre-inline {
   width: 200px;
   overflow:hidden;
   text-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:5;
   -webkit-box-orient:vertical;
}
.pre-wrapper {
   text-align: left;
}

.try-invoke-history ::v-deep {
   .el-form-item__label {
      text-align: right;
   }
}
</style>
